<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI服务平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4361ee', // 主色调：蓝色
                        secondary: '#3f37c9', // 次要色调：深紫色
                        accent: '#f72585', // 强调色：粉色
                        dark: '#1d3557', // 深色
                        light: '#f8f9fa' // 浅色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s ease-in-out;
            }
        }
    </style>
</head>
<body class="font-sans bg-light text-dark antialiased">
    <!-- 导航栏 -->
    <header class="fixed w-full top-0 z-50 transition-custom bg-white/90 backdrop-blur-md shadow-sm">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 品牌Logo -->
                <div class="flex items-center">
                    <a href="#" class="flex items-center space-x-2">
                        <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white">
                            <i class="fas fa-brain text-xl"></i>
                        </div>
                        <span class="text-xl font-bold text-primary">AI服务平台</span>
                    </a>
                </div>

                <!-- 桌面端导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#features" class="text-dark hover:text-primary transition-custom font-medium">功能特点</a>
                    <a href="#services" class="text-dark hover:text-primary transition-custom font-medium">服务内容</a>
                    <a href="#examples" class="text-dark hover:text-primary transition-custom font-medium">使用示例</a>
                    <a href="#pricing" class="text-dark hover:text-primary transition-custom font-medium">服务价格</a>
                </nav>

                <!-- 登录/注册按钮 -->
                <div class="hidden md:flex items-center space-x-4">
                    <a href="#" class="text-primary hover:text-secondary transition-custom font-medium">登录</a>
                    <a href="#" class="bg-primary hover:bg-secondary text-white px-5 py-2 rounded-full transition-custom font-medium">
                        免费试用
                    </a>
                </div>

                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button id="menu-toggle" class="text-dark hover:text-primary focus:outline-none">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white border-t">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="#features" class="block text-dark hover:text-primary transition-custom font-medium py-2">功能特点</a>
                <a href="#services" class="block text-dark hover:text-primary transition-custom font-medium py-2">服务内容</a>
                <a href="#examples" class="block text-dark hover:text-primary transition-custom font-medium py-2">使用示例</a>
                <a href="#pricing" class="block text-dark hover:text-primary transition-custom font-medium py-2">服务价格</a>
                <div class="pt-2 flex space-x-4">
                    <a href="#" class="text-primary hover:text-secondary transition-custom font-medium">登录</a>
                    <a href="#" class="bg-primary hover:bg-secondary text-white px-5 py-2 rounded-full transition-custom font-medium w-full text-center">
                        免费试用
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- 英雄区域(Hero Section) -->
    <section class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/5 to-secondary/5">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-10 lg:mb-0">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow">
                        智能AI服务<br>
                        <span class="text-primary">赋能你的业务</span>
                    </h1>
                    <p class="mt-6 text-lg text-gray-600 max-w-xl">
                        利用先进的人工智能技术，为企业和开发者提供高效、精准的智能服务，加速数字化转型和创新。
                    </p>
                    <div class="mt-8 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <a href="#" class="bg-primary hover:bg-secondary text-white px-8 py-3 rounded-full text-center transition-custom font-medium shadow-lg shadow-primary/20">
                            立即体验
                        </a>
                        <a href="#examples" class="bg-white hover:bg-gray-50 text-dark border border-gray-200 px-8 py-3 rounded-full text-center transition-custom font-medium">
                            <i class="fas fa-play-circle mr-2 text-primary"></i> 观看演示
                        </a>
                    </div>
                    <div class="mt-10 flex items-center space-x-6">
                        <div class="flex -space-x-2">
                            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <div class="w-10 h-10 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-sm text-gray-600">
                                +500
                            </div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">已有超过500+企业使用</div>
                            <div class="flex items-center text-yellow-400 mt-1">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                                <span class="ml-2 text-gray-600 text-sm">4.8/5.0</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lg:w-1/2 relative">
                    <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl shadow-primary/10">
                        <img src="https://picsum.photos/800/600?random=10" alt="AI服务演示" class="w-full h-auto">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
                            <div class="flex items-center mb-2">
                                <div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
                                <span class="ml-2 text-sm">AI对话界面</span>
                            </div>
                            <h3 class="text-xl font-bold">智能助手正在为你解答问题</h3>
                        </div>
                    </div>
                    <!-- 装饰元素 -->
                    <div class="absolute -top-4 -right-4 w-32 h-32 bg-accent/20 rounded-full blur-3xl -z-10"></div>
                    <div class="absolute -bottom-6 -left-6 w-40 h-40 bg-primary/20 rounded-full blur-3xl -z-10"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 统计数据 -->
    <section class="py-12 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div class="p-4">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2" id="counter-1">100+</div>
                    <div class="text-gray-600">AI模型</div>
                </div>
                <div class="p-4">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2" id="counter-2">5000+</div>
                    <div class="text-gray-600">企业客户</div>
                </div>
                <div class="p-4">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2" id="counter-3">10M+</div>
                    <div class="text-gray-600">日调用量</div>
                </div>
                <div class="p-4">
                    <div class="text-3xl md:text-4xl font-bold text-primary mb-2" id="counter-4">99.5%</div>
                    <div class="text-gray-600">服务可用性</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能特点 -->
    <section id="features" class="py-16 md:py-24 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">强大的AI功能特点</h2>
                <p class="text-lg text-gray-600">我们的AI服务具备多项先进特性，满足不同场景的需求，为你提供最优质的智能体验</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 功能卡片1 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-bolt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">高速响应</h3>
                    <p class="text-gray-600">采用优化的模型架构和高性能计算集群，确保毫秒级响应，满足实时交互需求。</p>
                </div>

                <!-- 功能卡片2 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-brain text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能理解</h3>
                    <p class="text-gray-600">先进的自然语言处理技术，精准理解用户意图，支持多轮对话和上下文感知。</p>
                </div>

                <!-- 功能卡片3 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-chart-line text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">数据分析</h3>
                    <p class="text-gray-600">强大的数据分析和机器学习能力，从海量数据中提取有价值的信息和洞察。</p>
                </div>

                <!-- 功能卡片4 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-shield-alt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">安全可靠</h3>
                    <p class="text-gray-600">采用多层安全防护机制，保障数据隐私和服务稳定性，符合行业安全标准。</p>
                </div>

                <!-- 功能卡片5 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-plug text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">灵活集成</h3>
                    <p class="text-gray-600">提供多种开发工具和SDK，支持快速集成到各类应用、网站和业务系统中。</p>
                </div>

                <!-- 功能卡片6 -->
                <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-custom transform hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5">
                        <i class="fas fa-globe text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多语言支持</h3>
                    <p class="text-gray-600">支持全球多种语言和方言，满足跨国企业和多语言用户的需求。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 服务内容 -->
    <section id="services" class="py-16 md:py-24">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">我们的AI服务</h2>
                <p class="text-lg text-gray-600">提供全方位的人工智能服务，覆盖自然语言处理、计算机视觉、数据分析等多个领域</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                    <div class="space-y-8">
                        <!-- 服务项1 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fas fa-comment-dots text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2">智能对话系统</h3>
                                <p class="text-gray-600">基于先进的自然语言处理技术，打造智能客服、虚拟助手等对话应用，支持多轮交互和上下文理解。</p>
                            </div>
                        </div>

                        <!-- 服务项2 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fas fa-language text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2">机器翻译</h3>
                                <p class="text-gray-600">支持全球多种语言的实时翻译，准确率高，响应快，可应用于跨境沟通、内容本地化等场景。</p>
                            </div>
                        </div>

                        <!-- 服务项3 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fas fa-image text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2">计算机视觉</h3>
                                <p class="text-gray-600">提供图像识别、物体检测、人脸识别等视觉智能服务，广泛应用于安防、零售、医疗等行业。</p>
                            </div>
                        </div>

                        <!-- 服务项4 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mr-4">
                                <i class="fas fa-chart-pie text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold mb-2">数据分析与预测</h3>
                                <p class="text-gray-600">利用机器学习算法对海量数据进行分析和建模，提供精准的趋势预测和决策支持。</p>
                            </div>
                        </div>
                    </div>

                    <div class="mt-10">
                        <a href="#" class="inline-flex items-center text-primary hover:text-secondary transition-custom font-medium">
                            查看全部服务 <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>

                <div class="relative">
                    <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl">
                        <img src="https://picsum.photos/800/600?random=20" alt="AI服务展示" class="w-full h-auto">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark/70 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-8 text-white">
                            <h3 class="text-2xl font-bold mb-4">多场景AI解决方案</h3>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-building text-2xl mr-3"></i>
                                        <span class="font-medium">企业服务</span>
                                    </div>
                                    <p class="text-sm">智能办公、流程自动化</p>
                                </div>
                                <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-shopping-cart text-2xl mr-3"></i>
                                        <span class="font-medium">智慧零售</span>
                                    </div>
                                    <p class="text-sm">个性化推荐、智能客服</p>
                                </div>
                                <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-hospital text-2xl mr-3"></i>
                                        <span class="font-medium">医疗健康</span>
                                    </div>
                                    <p class="text-sm">辅助诊断、病历分析</p>
                                </div>
                                <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
                                    <div class="flex items-center mb-2">
                                        <i class="fas fa-graduation-cap text-2xl mr-3"></i>
                                        <span class="font-medium">智慧教育</span>
                                    </div>
                                    <p class="text-sm">智能辅导、个性化学习</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 装饰元素 -->
                    <div class="absolute -top-6 -left-6 w-24 h-24 bg-accent/20 rounded-full blur-3xl -z-10"></div>
                    <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-primary/20 rounded-full blur-3xl -z-10"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 使用示例 -->
    <section id="examples" class="py-16 md:py-24 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">AI使用示例</h2>
                <p class="text-lg text-gray-600">看看我们的AI服务如何在实际场景中应用，解决各类业务问题</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 示例1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-custom">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/600/400?random=30" alt="智能客服示例" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-2">
                                <i class="fas fa-headset"></i>
                            </div>
                            <span class="text-sm font-medium text-primary">智能客服</span>
                        </div>
                        <h3 class="text-xl font-bold mb-2">24/7智能客服系统</h3>
                        <p class="text-gray-600 mb-4">基于自然语言处理的智能客服，支持多轮对话和意图理解，大幅提升客户服务效率。</p>
                        <a href="#" class="text-primary hover:text-secondary transition-custom font-medium inline-flex items-center">
                            查看详情 <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

                <!-- 示例2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-custom">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/600/400?random=31" alt="内容生成示例" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-2">
                                <i class="fas fa-pen-fancy"></i>
                            </div>
                            <span class="text-sm font-medium text-primary">内容生成</span>
                        </div>
                        <h3 class="text-xl font-bold mb-2">智能内容生成</h3>
                        <p class="text-gray-600 mb-4">自动生成文章、产品描述、社交媒体内容等，大幅减少内容创作时间和成本。</p>
                        <a href="#" class="text-primary hover:text-secondary transition-custom font-medium inline-flex items-center">
                            查看详情 <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

                <!-- 示例3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-custom">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/600/400?random=32" alt="数据分析示例" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-2">
                                <i class="fas fa-chart-bar"></i>
                            </div>
                            <span class="text-sm font-medium text-primary">数据分析</span>
                        </div>
                        <h3 class="text-xl font-bold mb-2">销售趋势预测</h3>
                        <p class="text-gray-600 mb-4">利用机器学习算法分析历史销售数据，精准预测未来销售趋势，辅助制定业务策略。</p>
                        <a href="#" class="text-primary hover:text-secondary transition-custom font-medium inline-flex items-center">
                            查看详情 <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 调用示例 -->
    <section class="py-16 md:py-24 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-4xl mx-auto">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">API调用示例</h2>
                    <p class="text-lg text-gray-600">简单几步即可集成我们的AI服务到你的应用中</p>
                </div>

                <div class="bg-gray-800 rounded-xl p-6 md:p-8 shadow-lg">
                    <div class="flex flex-col md:flex-row gap-8">
                        <div class="md:w-1/2">
                            <h3 class="text-xl font-bold text-white mb-4">Python SDK调用</h3>
                            <pre class="text-sm text-gray-200 bg-gray-900 p-4 rounded-lg overflow-x-auto"><code># 安装SDK
pip install ai-service-sdk

# 导入库
from ai_service import AIServiceClient

# 初始化客户端
client = AIServiceClient(api_key="your_api_key")

# 调用文本生成接口
response = client.text_generation(
    prompt="写一首关于春天的诗",
    max_tokens=100,
    temperature=0.7
)

# 处理响应
print(response.text)</code></pre>
                        </div>
                        <div class="md:w-1/2">
                            <h3 class="text-xl font-bold text-white mb-4">REST API调用</h3>
                            <pre class="text-sm text-gray-200 bg-gray-900 p-4 rounded-lg overflow-x-auto"><code>curl -X POST "https://api.ai-service.com/v1/chat/completions" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer your_api_key" \
  -d '{
    "model": "gpt-4",
    "messages": [
      {"role": "user", "content": "请推荐几个北京的旅游景点"}
    ],
    "max_tokens": 150
  }'</code></pre>
                        </div>
                    </div>

                    <div class="mt-8 text-center">
                        <a href="#" class="inline-block bg-primary hover:bg-secondary text-white px-8 py-3 rounded-full transition-custom font-medium shadow-lg shadow-primary/20">
                            查看API文档
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部CTA -->
    <section class="py-16 md:py-24 bg-gradient-to-r from-primary to-secondary text-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">准备好开始使用我们的AI服务了吗？</h2>
            <p class="text-lg text-white/80 max-w-2xl mx-auto mb-8">注册即可获得100次免费调用额度，无需信用卡，立即开始体验AI的强大能力</p>
            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                <a href="#" class="bg-white text-primary hover:bg-gray-100 px-8 py-3 rounded-full transition-custom font-medium text-lg">
                    免费注册
                </a>
                <a href="#" class="bg-transparent border-2 border-white text-white hover:bg-white/10 px-8 py-3 rounded-full transition-custom font-medium text-lg">
                    查看定价
                </a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center text-primary">
                            <i class="fas fa-brain text-xl"></i>
                        </div>
                        <span class="text-xl font-bold">AI服务平台</span>
                    </div>
                    <p class="text-gray-400 mb-6">利用先进的人工智能技术，为企业和开发者提供高效、精准的智能服务。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fab fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fab fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fab fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fab fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">产品服务</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">智能对话系统</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">机器翻译</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">计算机视觉</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">数据分析</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">内容生成</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">资源中心</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">API文档</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">开发教程</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">案例研究</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">技术博客</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">联系我们</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">北京市海淀区人工智能大厦</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-phone-alt mr-3 text-gray-400"></i>
                            <span class="text-gray-400">400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-envelope mr-3 text-gray-400"></i>
                            <span class="text-gray-400">contact@ai-service.com</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 AI服务平台. 保留所有权利.</p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-custom">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-custom">服务条款</a>
                        <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-custom">Cookie政策</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-custom z-50">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        // 返回顶部按钮
        const backToTopButton = document.getElementById('back-to-top');

        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.add('opacity-0', 'invisible');
                backToTopButton.classList.remove('opacity-100', 'visible');
            }
        });

        backToTopButton.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                const targetId = this.getAttribute('href');
                if (targetId === '#') return;

                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });

                    // 关闭移动端菜单（如果打开）
                    const mobileMenu = document.getElementById('mobile-menu');
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });

        // 导航栏滚动效果
        const header = document.querySelector('header');
        let lastScrollTop = 0;

        window.addEventListener('scroll', function() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

            if (scrollTop > 100) {
                header.classList.add('shadow-md');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.add('shadow-sm');
            }

            lastScrollTop = scrollTop;
        });
    </script>
</body>
</html>